<template>
  <div>
    <el-container>
      <el-aside class="aside" width="320px">
        <h2 style="text-align: left; margin-left: 5px">组件</h2>
        <div class="grid">
          <div v-for="(el, index) in assembly" :key="index" class="assembly">
            <img @click="addAssembly(el)" :src="el.img" alt="" />
          </div>
        </div>
      </el-aside>

      <el-container>
        <el-header class="white head">
          <h2>
            {{ leibie == "template" ? "模板名：" : "实例名：" + config.name }}
          </h2>
          <el-button @click="save" type="text" class="save">保存</el-button>
        </el-header>
        <el-main class="white" id="main">
          <!-- 右键菜单 -->
          <div
            ref="menu"
            @click="deleteAssembly"
            v-show="showMenu"
            class="menu"
          >
            删除该组件
          </div>
          <canvas width="1200" id="canvas" height="800"></canvas>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script src="../utils/jtopo">
</script>
<script>
import { changeExa } from "@/api/examples";
import { changeTem } from "@/api/templates";
export default {
  data() {
    return {
      stage: null,
      showMenu: false,
      assembly: [
        {
          type: "tank",
          width: 90,
          height: 140,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/9AD5A6AB-4245-4AEC-9DC7-BBC25F532395.png",
        },
        {
          type: "pump",
          width: 50,
          height: 50,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/12880431-0455-4E63-8860-CC379A13FF61.png",
        },
        {
          type: "phe",
          width: 100,
          height: 170,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/66E6C09A-744A-403A-8DFE-CC1741B40718.png",
        },
        {
          type: "heat_rod",
          width: 30,
          height: 80,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/1BBDBBA9-A2FA-48E5-840D-79F9F1287158.png",
        },
        {
          type: "close",
          width: 50,
          height: 50,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/516F2158-47BA-4166-859B-C0CD4E4DBCF1.png",
        },
        {
          type: "open",
          width: 50,
          height: 50,
          img:
            "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/12880431-0455-4E63-8860-CC379A13FF61.png",
        },
        {
          type: "fa",
          width: 30,
          height: 30,
          img: "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/fa.png",
        },
      ],
      cold:
        "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/73A63CC1-3D5A-4AF6-A131-3867D2846334.png",
      hot:
        "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/A107756A-2E56-4F63-A11A-8A5789DD1299.png",
      leibie: "template",
      config: {
        name: "这个是模板",
        origin: "沈阳",
        tank: 1,
        pump: 1,
        phe: 1,
        heat_rod_num: 2,
        heat_rod: ["一号加热棒", "二号加热棒"],
      },
      scene: {},
      helpNode: {
        up: [],
        down: [],
        oup: {},
        odown: {},
        rup: {},
        rdown: {},
        uright: {},
        dright: {},
      },
      heats: [],
      currentNode: null,
    };
  },
  mounted() {
    let { data, leibie } = this.$route.query;
    data = JSON.parse(data);
    this.config = Object.assign({}, data);
    this.leibie = leibie;

    this.initCanvas();
  },
  computed: {
    // setData() {
    //   let result = [];
    //   let data = this.config;
    //   let twiceNum = Math.ceil(data.heat_rod_num / 2);
    //   result.push(twiceNum);
    //   return result;
    // },
  },
  methods: {
    initCanvas() {
      let canvas = document.querySelector("#canvas");
      var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
      this.stage = stage;
      var scene = new JTopo.Scene(stage); // 创建一个场景对象
      this.scene = scene;
      this.stage &&
        this.stage.click(function (event) {
          if (event.button == 0) {
            this.showMenu = false;
          }
        });
      // var node = new JTopo.Node(""); // 创建一个节点
      // node.setLocation(300, 200); // 设置节点坐标
      // node.setImage(
      //   "https://spoc-beijing.oss-cn-beijing.aliyuncs.com/12880431-0455-4E63-8860-CC379A13FF61.png"
      // );
      // node.visible = false
      // scene.add(node); // 放入到场景中

      let tank = this.createNode(300, 310, 90, 140, this.assembly[0].img);
      this.tank = tank;
      this.createHelpNode();

      this.createHeatNode();

      // 水箱与辅助节点相连
      var linkUp = new JTopo.FoldLink(this.helpNode.up, tank);
      linkUp.strokeColor = "255,0,0";
      linkUp.lineWidth = 7;
      var linkDown = new JTopo.FoldLink(this.helpNode.down, tank);
      linkDown.strokeColor = "0,0,255";
      linkDown.lineWidth = 7;
      this.scene.add(linkUp);
      this.scene.add(linkDown);

      //其他节点及连线
      this.otherNode();
    },
    // 生成加热棒并连线
    createHeatNode() {
      let { width, height, img } = this.assembly[3];
      for (let i = 0; i < this.config.heat_rod_num; i++) {
        let n = Math.floor(i / 2);
        let x = n * 60 + 10;
        let y = i % 2 == 0 ? 280 : 400;
        let helpNode = i % 2 === 0 ? this.helpNode.up : this.helpNode.down;

        let heat_rod = this.createNode(x, y, width, height, img);
        let link = new JTopo.FoldLink(helpNode, heat_rod);
        link.strokeColor = i % 2 == 0 ? "255,0,0" : "0,0,255";
        link.lineWidth = 7;
        this.scene.add(heat_rod);
        this.scene.add(link);
        i % 2 == 0
          ? (this.heats[n] = [heat_rod])
          : this.heats[n].push(heat_rod);
      }
      this.heats.forEach((el) => {
        let link = new JTopo.FoldLink(
          el.length === 1 ? this.helpNode.down : el[1],
          el[0]
        );
        link.strokeColor = "0,0,255";
        link.lineWidth = 7;
        this.scene.add(link);
      });
    },
    // 其他节点及连线
    otherNode() {
      let { width, height, img } = this.assembly[4];
      let close1 = this.createNode(700, 60, width, height, img);
      let close2 = this.createNode(700, 160, width, height, img);

      let fa1 = this.createNode(
        330,
        180,
        this.assembly[6].width,
        this.assembly[6].height,
        this.assembly[6].img
      );
      let fa2 = this.createNode(
        330,
        550,
        this.assembly[6].width,
        this.assembly[6].height,
        this.assembly[6].img
      );

      this.helpNode.oup = new JTopo.Node("");
      this.helpNode.oup.setSize(0, 0);
      this.helpNode.oup.setLocation(650, 130);
      this.helpNode.oup.visible = false;

      this.helpNode.odown = new JTopo.Node("");
      this.helpNode.odown.setSize(0, 0);
      this.helpNode.odown.setLocation(650, 650);
      this.helpNode.odown.visible = false;
      // 新建右辅助节点
      let rup = new JTopo.Node("");
      rup.setSize(0, 0);
      rup.setLocation(800, 130);
      rup.visible = false;
      // 新建右下辅助接点
      let rdown = new JTopo.Node("");
      rdown.setSize(0, 0);
      rdown.setLocation(800, 450);
      rdown.visible = false;

      let uright = new JTopo.Node("出水口");
      uright.setSize(0, 0);
      uright.setLocation(900, 130);

      let dright = new JTopo.Node("出水口");
      dright.setSize(0, 0);
      dright.setLocation(900, 450);

      this.helpNode.rdown = rdown;
      this.helpNode.rup = rup;
      this.helpNode.uright = uright;
      this.helpNode.dright = dright;

      // 连接辅助节点
      let link1 = new JTopo.FoldLink(this.helpNode.oup, this.tank);
      let link2 = new JTopo.FoldLink(this.helpNode.odown, this.tank);

      // 辅助节点与close节点相连
      let link3 = new JTopo.FoldLink(close1, this.helpNode.oup);
      let link4 = new JTopo.FoldLink(close2, this.helpNode.oup);

      // close与右辅助节点相连
      let link5 = new JTopo.FoldLink(close1, rup);
      let link6 = new JTopo.FoldLink(close2, rup);

      let link7 = new JTopo.FoldLink(this.helpNode.odown, rdown);
      let link8 = new JTopo.FoldLink(rup, uright);
      let link9 = new JTopo.FoldLink(rdown, dright);
      [link1, link3, link4, link5, link6, link8].forEach((el) => {
        el.strokeColor = "255,0,0";
        el.lineWidth = 7;
      });
      [link2, link7, link9].forEach((el) => {
        (el.strokeColor = "0,0,255"), (el.lineWidth = 7);
      });
      this.scene.add([close1, close2, this.helpNode.oup, rup, rdown, fa1, fa2]);

      [
        // link1,
        // link2,
        link3,
        link4,
        link5,
        link6,
        // link7,
        link8,
        link9,
      ].forEach((el) => this.scene.add(el));

      if (this.config.phe > 0) {
        let { width, height, img } = this.assembly[2];
        let phe = this.createNode(474, 300, width, height, img);

        // 水箱右上辅助接点
        let rtankHelp = new JTopo.Node("");
        rtankHelp.setLocation(420, 130);
        rtankHelp.visible = false;
        rtankHelp.setSize(0, 0);
        // phe右辅助节点
        let rpheHelp = new JTopo.Node("");
        rpheHelp.setLocation(600, 340);
        rpheHelp.visible = false;
        rpheHelp.setSize(0, 0);
        // 新建phe右上节点
        let rupheHelp = new JTopo.Node("");
        rupheHelp.setLocation(630, 130);
        rupheHelp.visible = false;
        rupheHelp.setSize(0, 0);
        // 水箱右下辅助接点
        let rdtankHelp = new JTopo.Node("");
        rdtankHelp.setLocation(420, 650);
        rdtankHelp.visible = false;
        rdtankHelp.setSize(0, 0);
        // phe右下辅助接点
        let rdpheHelp = new JTopo.Node("");
        rdpheHelp.setLocation(600, 430);
        rdpheHelp.visible = false;
        rdpheHelp.setSize(0, 0);

        // 连接水箱和水箱右辅助节点
        let link1 = new JTopo.FoldLink(rtankHelp, this.tank);
        let link2 = new JTopo.FoldLink(rpheHelp, rtankHelp);
        let link3 = new JTopo.FoldLink(rpheHelp, rupheHelp);
        let link4 = new JTopo.FoldLink(this.helpNode.oup, rupheHelp);
        let link5 = new JTopo.FoldLink(rdtankHelp, this.tank);
        let link6 = new JTopo.FoldLink(rdpheHelp, rdtankHelp);
        let link7 = new JTopo.FoldLink(dright, rdpheHelp);

        [phe, rdtankHelp, rtankHelp, rpheHelp, rupheHelp].forEach((el) =>
          this.scene.add(el)
        );
        [link1, link2, link3, link4].forEach((el) => {
          el.strokeColor = "255,0,0";
          el.lineWidth = 7;
          this.scene.add(el);
        });
        [link5, link6, link7].forEach((el) => {
          el.strokeColor = "0,0,255";
          el.lineWidth = 7;
          this.scene.add(el);
        });
        // return 0;
      } else {
        this.scene.add(link1);
        this.scene.add(link2);
        this.scene.add(link7);
      }
    },
    // 添加节点
    createNode(x, y, w, h, img, type) {
      let node = new JTopo.Node(type ? type : "");
      node.setImage(img);
      node.setLocation(x, y);
      node.setSize(w, h);
      this.scene.add(node);
      return node;
    },
    // 新建辅助节点
    createHelpNode() {
      let nodeUp = new JTopo.Node("");
      nodeUp.visible = false;
      nodeUp.setLocation(300, 250);
      nodeUp.setSize(0, 0);
      let nodedown = new JTopo.Node("");
      nodedown.visible = false;
      nodedown.setLocation(300, 510);
      nodedown.setSize(0, 0);
      this.helpNode.up = nodeUp;
      this.helpNode.down = nodedown;
    },
    // 添加组件
    addAssembly(item, x, y) {
      let positionX = x || 0;
      let positionY = y || 0;
      let newNode = this.createNode(
        positionX,
        positionY,
        item.width,
        item.height,
        item.img,
        item.type
      );
      let that = this;
      newNode.addEventListener("mouseup", function (event) {
        that.currentNode = this;
        that.handler(event);
      });
    },
    handler(event) {
      let { x, y } = event;
      if (event.button == 2) {
        let { menu } = this.$refs;
        menu.style.top = event.pageY;
        menu.style.left = event.pageX;
        this.showMenu = true;
      }
      // 添加加热棒
      if (
        x > 10 &&
        x < 300 &&
        y > 250 &&
        y < 510 &&
        this.currentNode.text == "heat_rod"
      ) {
        this.config.heat_rod_num += 1;
        // this.stage.repaint();
        // console.log(this.stage)
        // this.initCanvas()
        let newCanvas = document.createElement("canvas");
        newCanvas.setAttribute("width", 1200);
        newCanvas.setAttribute("height", 800);
        newCanvas.setAttribute("id", "canvas");
        let main = document.querySelector("#main");
        main.removeChild(document.querySelector("#canvas"));
        main.appendChild(newCanvas);
        this.initCanvas();
      }
      // 添加phe
      if (
        x > 440 &&
        x < 580 &&
        y > 310 &&
        y < 460 &&
        this.currentNode.text == "phe"
      ) {
        this.config.phe += 1;
        // this.stage.repaint();
        // console.log(this.stage)
        // this.initCanvas()
        let newCanvas = document.createElement("canvas");
        newCanvas.setAttribute("width", 1200);
        newCanvas.setAttribute("height", 800);
        newCanvas.setAttribute("id", "canvas");
        let main = document.querySelector("#main");
        main.removeChild(document.querySelector("#canvas"));
        main.appendChild(newCanvas);
        this.initCanvas();
      }
    },
    // 删除组件
    deleteAssembly() {
      this.scene.remove(this.currentNode);
      this.showMenu = false;
    },
    save() {
      let saveFun = this.leibie == "template" ? changeTem : changeExa;
      saveFun(this.config).then((res) => {
        if (res.status == "200") {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          setTimeout(() => {
            this.$router.back(-1);
          }, 800);
        } else {
          this.$message({
            type: "error",
            message: "保存失败，请检查你的网络",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.aside {
  background: #fcfcfc;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
  padding-top: 20px;
}
.grid .assembly {
  width: 100px;
  height: 100px;
  /* background: red; */
}
.grid .assembly img {
  width: 100%;
  height: 100%;
}
.head {
  text-align: left;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: left;
}
.head h2 {
  height: 100%;
  line-height: 60px;
}
.white {
  background: white;
  margin: 5px 10px;
  border-radius: 12px;
  position: relative;
}
.menu {
  width: 100px;
  background: #e1e1e1;
  padding: 5px 0 5px 10px;
}
.menu:hover {
  background: rgb(118, 118, 230);
}
.save {
  margin-left: 20px;
  margin-top: 5px;
  font-size: 20px;
}
</style>